<template>
    <div class="container">
        <!-- 路径导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>知识管理</el-breadcrumb-item>
            <el-breadcrumb-item>公益内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="公益名称">
                    <el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输入公益名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="queryList">搜索</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="toAddFree">新增公益</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="freeList" border style="width: 100%" :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column width="80" prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="公益名称">
            </el-table-column>
            <el-table-column prop="simplyIntroduce" label="公益简介">
            </el-table-column>
            <el-table-column prop="img" label="公益图片">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px;"
                        :src="url + 'downLoad?filename=' + scope.row.img"></el-image>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" #default="scope" label="详情内容">
                <span v-html="scope.row.text">
                </span>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button icon="el-icon-edit" type="primary" size="mini"
                        @click="toEditFree(scope.row)">编辑</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="mini"
                        @click="deleteFree(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 15, 20]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 新增和修改的对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
            <el-form :model="free">
                <el-form-item label="公益名称" label-width="80px">
                    <el-input placeholder="请输入公益名称" v-model="free.name"></el-input>
                </el-form-item>
                <el-form-item label="公益简介" label-width="80px">
                    <el-input placeholder="请输入公益简介" v-model="free.simplyIntroduce"></el-input>
                </el-form-item>

                <el-form-item label="公益图片" label-width="80px">
                    <!-- el-upload:上传组件
                    action:选择图片是上传的接口
                    List-type: 上传组件的类型
                    on-success:上传成功的回调函数
                    Limit: 限制只能上传一个文件
                    on-preview:图片预览的事件
                    on-remove:删除图片的事件 -->
                    <el-upload :action="url + 'upload'" list-type="picture-card" :on-success="handleSuccess" :limit="1"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- 预览图片 -->
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="详情内容" label-width="80px">
                    <!-- 富文本编辑器组件 -->
                    <quill-editor v-model="free.text"></quill-editor>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="addFree">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { url } from '@/util/tools.js'
export default {
    data() {
        return {
            url: '',
            // 查询信息对象
            queryInfo: {
                name: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            freeList: [],
            title: '', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            free: { // 对象
                "id": '',
                "name": "",
                "img": "",
                "simplyIntroduce": "",
                "text": "",
                "createTime": ""
            },
            dialogVisible: false,
            dialogImageUrl: '',
            fileList: []
        }
    },
    methods: {
        // 处理上传成功的函数
        handleSuccess(response) {
            // 把上传后的图片路径，交给对象的tabularChart
            this.free.img = response.message;
        },

        // 删除图片的事件
        handleRemove(file, fileList) {
            console.log(file, fileList);
            // 移除数据
            this.free.img = '';
        },

        // 预览图片事件
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            console.log(file.url)
            this.dialogVisible = true;
        },
        // 删除
        deleteFree(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('free/' + id)
                        .then(resp => {
                            if (resp.data.status == 200) {
                                this.$message.success(resp.data.message)
                                this.queryList()
                            } else {
                                this.$message.error(resp.data.message)
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 进入添加的对话框
        toAddFree() {
            this.title = "新增公益";
            this.dialogFormVisible = true;
        },
        // 进入修改的预览数据页面
        toEditFree(row) {
            // console.log(row)
            // 赋值
            this.free = row;
            // 设置标题
            this.title = "修改公益";
            // 开启对话框
            this.dialogFormVisible = true;
            // 动态的获取图片的名称并帮到到fileList
            this.fileList = [{
                name: row.img,
                url: url + 'downLoad?filename=' + row.img
            }];
        },
        // 添加
        addFree() {
            if (this.free.id) { // 有值为true  修改		
                this.$http.put("free/edit", this.free)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.free = { // 对象
                                "id": '',
                                "name": "",
                                "img": "",
                                "simplyIntroduce": "",
                                "text": "",
                                "createTime": ""
                            }
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            } else {
                this.$http.post("free/add", this.free)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.free = { // 对象
                                "id": '',
                                "name": "",
                                "img": "",
                                "simplyIntroduce": "",
                                "text": "",
                                "createTime": ""
                            }
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
            //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
            this.fileList = []
        },
        cancle() {
            this.dialogFormVisible = false;
            this.free = {
                "id": '',
                "name": "",
                "img": "",
                "simplyIntroduce": "",
                "text": "",
                "createTime": ""
            }
            //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
            this.fileList = []
        },
        queryList() {
            this.$http.get('free/findByPage', {
                params: this.queryInfo
            }).then(res => {
                if (res.data.status == 200) {
                    this.freeList = res.data.data.list;
                    this.total = res.data.data.total
                } else {
                    this.$message.error('查询失败!')
                }
            })
        },
        handleSizeChange(size) {
            // console.log('每页显示数量发生改变');
            this.queryInfo.pageSize = size
            this.queryInfo.pageNum = 1
            this.queryList()
        },
        handleCurrentChange(num) {
            // console.log('页码发生改变');
            this.queryInfo.pageNum = num
            this.queryList()
        }
    },
    mounted() {
        this.queryList();
        // 动态的获取tool.js中的url，并赋值给当前组件的全局url
        this.url = url;
    }
}
</script>
<style>
.el-breadcrumb {
    margin-bottom: 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #ddd;
}

.el-pagination {
    margin-top: 15px;
}

.el-link {
    padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
    min-height: 200px;
}
</style>